<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/7/16
  Time: 11:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>爱购注册页面</title>
    <link rel="stylesheet" href="${ctx}/static/front/css/reset.css"/>
    <link rel="stylesheet" href="${ctx}/static/front/css/footer.css"/>
    <link rel="stylesheet" href="${ctx}/static/front/css/login.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        .reg-div input {
            width: 305px;
            padding-left: 10px;
        }

        #getEmail {
            width: 110px;
            padding-left: 10px;
        }

        .pro {
            margin-top: 10px;
        }

        .pro a {
            color: #B41E23;
        }
    </style>
</head>
<body>
<!--登录/注册的头部-->
<div class="lr-top w1230">
    <a href="${ctx}/front/frontUser/goindex"><img src="${ctx}/static/front/img/logo.png" width="150px" height="60px"/></a>
    <div class="top-link">
        <a href="#" class="top-link1"></a>
        <a href="#" class="top-link2"></a>
        <a href="#" class="top-link3"></a>
    </div>
</div>
<!--登录/注册的中部-->
<div class="lr-main">
    <div class="w1230">
        <div class="reg-div">
            <h3 class="login-title">注册爱购</h3>
            <p class="go-reg">若有账号？<a href="${ctx}/front/frontUser/goLogin">在此登录</a></p>
            <form action="#" method="post" id="form">
                <p><input type="text" name="username" placeholder="请输入注册的账号"/></p>

                <p><input type="password" name="password" placeholder="请输入密码" id="password1"/></p>

                <p><input type="password" placeholder="请确认密码" id="password2"/></p>
                <p id="pwdError" style="color: red;font-size: 14px;margin-left: 55px;"></p>

                <p><input type="text" name="email" placeholder="请输入邮箱"/></p>
                <p id="emailError" style="color: red;font-size: 14px;margin-left: 55px;"></p>

                <p class="clear-float"><input type="text" name="code" placeholder="验证码" class="code"/><input
                        type="button" value="点击获取验证码" id="getEmail"></p>
                <p id="msg" style="color: red;font-size: 14px;margin-left: 55px;"></p>

                <input type="submit" value="同意并注册协议" class="sum-btn"/>
                <p class="pro"><a href="#">《爱购用户协议》</a></p>
            </form>
        </div>
    </div>
</div>
<!--登录/注册的底部-->
<div class="lr-footer footer">
    <p class="w1230">
        <a href="#">关于爱购</a>
        <a href="#">合作伙伴</a>
        <a href="#">营销中心</a>
        <a href="#">廉正举报</a>
        <a href="#">联系客服</a>
        <a href="#">开发平台</a>
        <a href="#">诚征英才</a>
        <a href="#">联系我们</a>
        <a href="#">网站地图</a>
        <a href="#">知识产权</a><span>|</span>
        <span>&copy;2018-2020 igo.com 版权所有</span>
    </p>
</div>
<script>
    $(function () {

        //获取验证码
        $("#emailError").hide();
        $("#getEmail").on("click", function () {
            var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            var email = $("input[name='email']").val();
            if (!filter.test(email)) {
                $("#emailError").html("邮箱格式错误，请从新输入");
                $("#emailError").show();
                return false;
            } else {
                $("#emailError").html("");
                $("#emailError").show();
            }
            //提交邮箱
            $.post('${ctx}/front/frontUser/email', //地址
                { //data是参数
                    email: email
                },
                function(data){
                    console.log(data);
                    //倒计时
                    if (data.length==0){
                        $('#getEmail').prop("disabled", "disabled");	//设置不可用  prop() 方法设置或返回被选元素的属性和值。 disabled 属性规定应该禁用 input 元素。
                        var time = 59;
                        var a = setInterval(function (){
                            time--;
                            $('#getEmail').val("重新发送"+time+"秒");
                            if (time==0) {
                                clearInterval(a);
                                $('#getEmail').prop("disabled", "");
                                $('#getEmail').val("点击获取验证码");
                            }
                        }, 1000);
                    }

                })
        })
        //隐藏密码不一致提示
        $("#password2").focus(function () {
            $("#pwdError").hide();
        })

        //隐藏邮箱不一致提示
        $("input[name='email']").focus(function () {
            $("#emailError").hide();
        })

        //提交事件
        $("#form").on('submit', function () {
            //判断两次密码是否一致
            var password1 = $("#password1").val();
            var password2 = $("#password2").val();
            if (password1 != password2) {
                $("#pwdError").html("密码不一致，请从新输入");
                $("#pwdError").show();
                return false;
            }
            var username = $("input[name='username']").val();
            var password1 = $("#password1").val();
            var email = $("input[name='email']").val();
            var code = $("input[name='code']").val();
            console.log(username,password1,email,code);
            if(username.length==0 || password1.length==0 || email.length==0  || code.length==0 ){
                return false;
            }
            console.log(username,password1,email,code);

            $.post("${ctx}/front/frontUser/registerUser",
                {
                    username: username,
                    password: password1,
                    email: email,
                    code: code
                }, function (date) {
                    if(date.length!=0){
                        $("#msg").html(date);
                        $("#msg").css("color","red");
                    }else{
                        $("#msg").html("注册成功");
                        $("#msg").css("color","green");

                        $("input[name='username']").val("");
                        $("#password1").val("");
                        $("#password2").val("");
                        $("input[name='email']").val("");
                        $("input[name='code']").val("");
                        $('#getEmail').val("点击获取验证码");
                    }
                })
            return false;
        })

    })

</script>
</body>
</html>
